<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body,
        html {
            /* height: 3000px; */
            background: url(./images/wall.png) no-repeat;
            background-size: 100%;
        }
        
        .wall {
            width: 1000px;
            margin: auto;
            padding-top: 20px;
        }
        
        .wall .title {
            width: 100%;
            height: 50px;
            font-size: 40px;
            color: black;
            line-height: 50px;
            /* border: 1px solid black; */
            text-align: center;
            background-color: rgba(247, 132, 132, 0.7);
            border-radius: 10px;
            box-shadow: 0px 0px 10px black;
        }
        
        .wall .wall_top {
            width: 100%;
            height: 400px;
            /* border: 1px solid black; */
            margin-top: 10px;
            background-color: rgba(247, 132, 132, 0.7);
            border-radius: 20px;
            box-shadow: 0px 0px 10px black;
            position: relative;
            overflow: hidden;
            background: url(./images/540f3973a764336480cff7952ed43027.png)no-repeat bottom left;
            background-size: 400px;
        }
        
        .wall .wall_bottom {
            width: 100%;
            height: 40px;
            font-size: 20px;
            display: flex;
            justify-content: left;
            box-sizing: border-box;
            margin-top: 10px;
            line-height: 30px;
            padding-left: 25px;
            background-color: rgba(247, 132, 132, 0.7);
            border-radius: 10px;
            padding-top: 4px;
            box-shadow: 0px 0px 10px black;
        }
        
        .wall .wall_bottom input {
            border-radius: 5px;
            border: 1px solid black;
            height: 30px;
            box-sizing: border-box;
            vertical-align: middle;
            padding-left: 5px;
        }
        
        .wall .inp1 {
            width: 100px;
            margin-right: 50px;
        }
        
        .wall .inp2 {
            width: 500px;
            margin-right: 25px;
        }
        
        .wall .btn {
            width: 100px;
            height: 30px;
            border-radius: 10px;
            border: 2px solid red;
            border-radius: 5px;
            background-color: salmon;
            cursor: pointer;
            opacity: .7;
            box-shadow: 0px 0px 10px black;
            font-size: 20px;
            vertical-align: middle;
        }
        
        .wall_top .wall_p {
            position: absolute;
            left: 1000px;
            top: 0;
            color: white;
            height: 30px;
            display: flex;
            flex-wrap: nowrap;
            z-index: 2;
        }
        
        .wall .wall_top img {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .wall .wall_top span {
            line-height: 30px;
            white-space: nowrap;
            margin-right: 5px;
        }
        
        .wall_top .memo {
            border: 1px solid black;
            width: 200px;
            min-height: 150px;
            background-color: rgba(247, 132, 132, 0.7);
            position: absolute;
            left: 100px;
            top: 100px;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
            box-shadow: 0px 0px 10px black;
        }
        
        .wall_top .memo>.content {
            padding-left: 10px;
        }
        
        .wall_top .memo>.time {
            color: black;
            font-size: 12px;
            font-weight: bold;
        }
        
        .wall_top .memo>.name {
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="wall">
        <!-- 许愿墙的标题 -->
        <p class="title">2022 新年许愿墙</p>

        <div class="wall_top">
            <!-- 弹幕： -->
            <!-- <p class="wall_p">
                <img src="./images/xiaoxin_4.jpg" alt="">
                <span></span>
            </p> -->

            <!-- 便签memo -->
            <!-- <div class="memo">
                <p class="time">2022-1-17</p>
                <p class="content">新年快乐</p>
                <p class="name">陈小龙</p>
            </div> -->
        </div>
        <!-- 输入祝福语 -->
        <div class="wall_bottom">
            <p> <span>姓名：</span> <input type="text" placeholder="请留名" class="inp1"></p>
            <p> <span>新年愿望：</span> <input type="text" placeholder="请输入祝福语" class="inp2"></p>
            <p><button class="btn">发送</button></p>
        </div>

    </div>
    <script>
        let oBtn = document.querySelector('.btn');
        let oCont = document.querySelector('.wall_top')
        let oInp2 = document.querySelector('.inp2')
        let oInp1 = document.querySelector('.inp1')


        oBtn.onclick = function() {
            if (oInp1.value.trim() != '' && oInp2.value.trim() != '') {
                var oP = document.createElement('p')
                var oM = document.createElement('div')
                oP.className = 'wall_p'
                oM.className = 'memo'
                oCont.appendChild(oP)
                oCont.appendChild(oM)

                //增加弹幕
                oP.innerHTML = `<img src="./images/xiaoxin_4.jpg" alt="">
            <span style="color: black; font-size: 12px;font-weight: bold;">${oInp1.value}</span>
            <span>:</span>
            <span>${oInp2.value}</span>
            `

                //增加便签
                oM.innerHTML = `
            <p class="time" >${nowdate()}</p>
                <p class="content">${oInp2.value}</p>
                <p class="name">${oInp1.value}</p>
            
            `
                oP.style.top = ran(0, oCont.clientHeight - oP.clientHeight) + 'px'
                oM.style.top = ran(0, oCont.clientHeight - oM.clientHeight) + 'px'
                oM.style.left = ran(0, oCont.clientWidth - oM.clientWidth) + 'px'

                move(oP, -oP.clientWidth)
                oP.style.color = rancolor();
                oM.style.color = rancolor();
                // oInp2.value = null
            } else {
                alert('输入不能为空哦')
            }
        }

        //封装随机数
        function ran(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }

        //封装随机颜色
        function rancolor() {
            var r = ran(0, 256)
            var g = ran(0, 256)
            var b = ran(0, 256)
            return `rgb(${r},${g},${b})`
        }
        console.log(rancolor());
        // console.log(ran(0, 256));

        //封装弹幕移动的距离
        function move(ele, end) {
            var second = 3
            var t = setInterval(function() {
                var eLeft = parseInt(getComputedStyle(ele).left);
                ele.style.left = eLeft - second + 'px'
                if (eLeft - second <= end) {
                    clearInterval(t)
                    ele.remove();
                    console.log(2);
                }
                console.log(1);
            }, 50)

        }
        //封装获取电脑的日期，调整格式
        function nowdate() {
            var res = ""
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var week = date.getDay();
            // var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            if (second < 10) {
                return year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + 0 + second
            } else
                return year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second
        }
    </script>

</body>

</html>